<!-- 新增检测任务单(生产型) -->
<template>
  <div class="dialog-container" id="dialog-container">
    <el-dialog v-dialogDrag :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'"
      append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('update:show', false)"
      :before-close="handleClose" :show="show" width="800px">
      <div slot="title">
        <span style="color:white;">新增</span>
        <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;" @click="isFullScreen = !isFullScreen">
          <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
        </button>
      </div>
      <div style="overflow: hidden;">
        <img src="../../../../assets/images/sagw.png" style="float:left;">
        <h2 style="text-align:center;">新增检测任务单（生产型）</h2>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form :model="form" ref="form" :inline="true" label-width="130px" size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托单号：" prop="orderid">
                  <el-input v-model="form.orderid" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托日期：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务类型：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托部门：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托人：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="零件信息" name="second">
          <el-form :model="form" :inline="true" label-width="130px" size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目号：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="零件号：" prop="orderid">
                  <el-input v-model="form.orderid" style="width: 100px;float: left;"></el-input>
                  <select-part-number-button style="display: inline-block;margin-left: 8px;"></select-part-number-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="零件图号：" prop="orderid">
                  <el-input v-model="form.orderid" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="零件名称：" prop="orderid">
                  <el-input v-model="form.orderid"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="材料牌号：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批次零件总数量：" prop="orderid">
                  <el-input v-model="form.orderid"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="样品状态阶段：" prop="orderid">
                  <el-select v-model="form.orderid" filterable placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in form.orderid" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="材料炉号：" prop="orderid">
                  <el-input v-model="form.orderid"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="样品信息" name="third">
          <el-form :model="form" ref="form" :inline="true" label-width="130px" size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item label="热处理炉号：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="样品状态：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="样品数量：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批次信息：" prop="orderid">
                  <el-input v-model="form.orderid" auto-complete="false"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="供应厂商：" prop="orderid">
                  <el-input v-model="form.orderid"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" prop="orderid">
                  <el-input type="textarea" v-model="form.orderid" auto-complete="false" style="width: 580px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <br>
      <el-button type="primary" plain size="small">新增检测项目</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import SelectPartNumber from '../select-part-number-button'; // 选择零件号
  export default {
    components: {
      'select-part-number-button': SelectPartNumber,
    },
    data() {
      return {
        isFullScreen: true,
        dialogVisible: this.show,
        activeName: 'first',
        form: {
          orderid: ''
        }
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.isFullScreen = false;
        this.dialogVisible = false;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
